<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib tagdir="/WEB-INF/tags/" prefix="ag"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Variables de redirections struts -->
<ag:urls />

<!-- Css -->
<link href="<s:url value="/assets/css/bootstrap.css"/>" rel="stylesheet"
	type="text/css">
<link href="<s:url value="/assets/css/style.css"/>" rel="stylesheet"
	type="text/css">
<link href="<s:url value="/assets/font-awesome/css/font-awesome.css"/>"
	rel="stylesheet" type="text/css">
<link href="<s:url value="/assets/css/style-responsive.css"/>"
	rel="stylesheet" type="text/css">
<link href="<s:url value="/assets/css/dev/visualiser.css"/>"
	rel="stylesheet" type="text/css">
<link href="<s:url value="/assets/css/datepicker.css"/>"
	rel="stylesheet" type="text/css">

<!-- JS -->
<script src="<s:url value="/assets/js/jquery.js"/>"></script>
<script src="<s:url value="/assets/js/agraf/visualiser/visualiser.js"/>"></script>
<script src="<s:url value="/assets/js/chart-master/Chart.js"/>"></script>
<script src="<s:url value="/assets/js/chartjs-conf.js"/>"></script>


<title>Visualiser un périmetre</title>
</head>
<body>

	<section id="contenair"> <ag:header /> <ag:menu /> </section>

	<section id="main-content"> <section class="wrapper">
	<div class="col-md-12">
		<div class="content-panel">
			<h4>Recapitulatif d'un périmètre</h4>
			<hr>
			<div id="divTableauSaisie">
				<div id="erreur"></div>
				<s:actionmessage />
				<div class="select_perimetre">
					Perimetre : <select id="selectPerimetre">
						<option value="0">-- Choisissez un périmètre --</option>
						<s:iterator value="perimetreList" var="perimetre">
							<option value="${perimetre.id }">${perimetre.libelle }</option>
						</s:iterator>
					</select>
				</div>
				<table class="table table-striped table-advance table-hover">
					<thead>
						<tr>
							<th class="thSaisie">Activité</th>
							<th class="thSaisie">Charge initiale</th>
							<th class="thSaisie">Etat</th>
							<th class="thSaisie">RAF</th>
							<th class="thSaisie">Consommé</th>
							<th class="thSaisie">Dérive</th>
							<th class="thSaisie">Développeurs</th>
							<th class="thSaisie">Remarques</th>
						</tr>
					</thead>
					<tbody id="activiteTab">
					</tbody>
				</table>

				<input id="idUtilisateur" type="hidden"
					value="${ utilisateurConnecte.id}" /> 
					
				<input
					id="isVisualiserPerimetre" type="hidden" value="true" />
			</div>
		</div>
	</div>

	<div class="col-lg-6" id="col-lg-6-visualiser">
		<div class="content-panel" id="content-panel-visualiser">
			<h4>
				<i class="fa fa-angle-right"></i> Graphique
			</h4>
			<div class="panel-body text-center" id="canvas">
				<canvas id="doughnut" height="300" width="400"></canvas>
			</div>
			<div id="recapActivite"></div>
		</div>
	</div>
	</section> </section>
	<ag:ajoutJs />
	<ag:popupNotification />

</body>
</html>
